
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>华为商城</title>
		<link rel="icon" type="images/x-icon" href="img/homeimg/favicon.ico">
		<link rel="stylesheet" type="text/css" href="css/shopcar.css"/>
        <style>
            *{
	margin: 0;
	padding: 0;
}
li{
	list-style: none;
}
a{
	text-decoration: none;
}
body{
	font-size: 12px;
	color: #3A3A3A;
	background-color: #F9F9F9;
}

#top{
	background-color: #f9f9f9;
}


/* 头部 */
#daohang{
	width: 100%;
	height: 52px;
	background-color: white;
}
#nav{
	width: 1200px;
	height: 52px;
	margin: 10px auto;
	
}
.nav-img{
	width: 256px;;
	height: 41px;
	float: left;
	margin-top: 20px;
	line-height: 36px;
}
.nav-img img{
	width: 120px;
	float: left;
}
.nav-img span{
	margin-left: 26px;
	font-size: 22px;
}
.nav-jindu{
	width: 320px;
	height: 50px;
	margin-top: 2px;
	float: right;
	background: url(../img/shopcar/sprites6.svg) no-repeat;
	background-position: -42px -22px;
}

#content{
	width: 100%;
	height: auto;
	background-color: #F9F9F9;
}
#content::before{
	content: " ";
	display: table;
}
#content::after{
	content: " ";
	display: table;
}

				/* 购物车 */

#content{
	width: 1200px;
	margin: auto;
	background-color: #fff;
	margin-top: 20px;
}
#car-con{
	width: 100%;
	height:auto;
	display: none;
}
.con-top{
	width: 100%;
	height: 40px;
}
.con-top ul{
	margin-left: 100px;
}
.con-top ul li{
	float: left;
	margin-left: 30px;
	float: left;
	width: 100px;
	min-height: 14px;
	text-align: center;
	color: #A4A4A4;
	line-height: 40px;
}
.con-top ul li:first-child{
	width: 500px;
	text-align: left;
}
.con-list{
	width: 1150px;
	height: 120px;
	padding-left: 50px;
	margin-top: 20px;
}
.con-list img{
	width: 100px;
	float: left;
	margin-right: 20px;
}
.con-list ul{
	float: left;
	height: 40px;
	margin-top: 25px;
}
.con-list ul li{
	float: left;
	width: 100px;
	height: 40px;
	margin-left: 30px;
	text-align: center;
	line-height:40px ;
	font-size: 14px;
}
.con-list ul li:first-child{
	width: 430px;
	text-align: left;
}
.con-list ul li:last-child{
	color: #A4A4A4;
}
#price-total{
	color: #CA141D;
	font-weight: bold;
}
.delete-bot{
	cursor: pointer;
}
.con-list ul li .jiajian{
	width: 86px;
	height: 20px;
	border: 1px solid #D6D6D6;
	margin-top: 10px;
}
.con-list ul li .jiajian span{
	display: inline-block;
	width: 20px;
	height: 20px;
	color: #717171;
	cursor: pointer;
	text-align: center;
	line-height: 19px;
	font-size: 16px;
}
.con-list ul li .jiajian input{
	width: 44px;
	height: 20px;
	border: none;
	border-left: 1px solid #D6D6D6;
	border-right: 1px solid #D6D6D6;
	outline: none;
	text-align: center;
}
#jian{
	float: left;
}
#goodsnum{
	float: left;
}
#jia{
	float: left;
}
#car-con .delete-list{
	width: 1200px;
	height: 60px;
	margin-top: 10px;
}
.delete-list::before{
	content: "";
	display: table;
}
.delete-list::after{
	content: "";
	display: table;
}
.delete-list .dele-left{
	width: 135px;
	height: 60px;
	float: left;
	text-align: right;
	line-height: 60px;
	color: #A4A4A4;
	font-size: 14px;
}
.delete-list .jiesuan{
	width: 180px;
	height: 60px;
	float: right;
}
.delete-list .jiesuan a{
	display: block;
	width: 180px;
	height: 60px;
	color: #fff;
	background-color: #ca151e;
	line-height: 60px;
	font-size: 18px;
	text-align: center;
}
.goods-price{
	width: 177px;
	height: 45px;
	margin-right: 30px;
	margin-top: 7px;
	float: right;
}
.goods-price p:first-child{
	font-size: 14px;
	color: #3A3A3A;
	text-align: right;
}
#zongji{
	font-size: 18px;
	color: #CA151E;
	font-weight: bold;
}
.goods-price p:last-child{
	color: #A4A4A4;
	text-align: right;
}
.goods-price p:last-child em{
	color: #3A3A3A;
	font-style: normal;
}
#goods-zong{
	color: #CA151E;
	margin: 0 5px;
	font-weight: bold;
}



/* 购物车为空 */
.empty{
	width: 100%;
	height: 365px;
	margin-top: 135px;
	display: none;
}
.empty span{
	background: url(../img/shopcar/icon-header-minicart.png) no-repeat;
	display: block;
	height: 100px;
	margin: 0 auto 36px;
	width: 100px;
}
.empty p{
	font-size: 18px;
	color: #a4a4a4;
	margin-bottom: 16px;
	text-align: center;
}
.empty a{
	width: 172px;
	height: 46px;
	line-height: 46px;
	font-size: 18px;
	color: #fff;
	display: block;
	margin: 0 auto;
	background: #ca141d;
	border-radius: 2px;
	text-align: center;
}
.tuijian{
	width: 1200px;
	height: 266px;
	margin: auto;
}
.tuijian>p,.delete>p{
	color: #3a3a3a;
	font-size: 18px;
	line-height: 1;
	margin: 30px 0 10px;
}
.tuijian-con{
	width: 1180px;
	height: 200px;
	padding: 20px 10px 18px 10px;
	background-color: #fff;
}
.tuijian-list{
	width: 222px;
	height: 200px;
	text-align: center;
	float: left;
	margin: 0 5px;
}
.tuijian-list img{
	width: 134px;
	/* margin-left: 40px; */
}
.tuijian-list p{
	font-size: 14px;
	line-height: 20px;
	color: #3A3A3A;
	text-align: center;
	margin-top: 6px;
	margin-bottom: 22px;
}
.tuijian-list span{
	font-size: 14px;
}

.delete{
	width: 1200px;
	height: 139px;
	margin:auto;
}
.delete ul{
	width: 1090px;
	height: 40px;
	background-color: #fff;
	padding: 0 40px 0 70px;
	border-bottom: 1px solid #eaeaea;
}
.delete ul li{
	float: left;
	color: #A4A4A4;
	line-height: 40px;
	width: 100px;
	margin-left: 30px;
	text-align: center;
}
.delete ul li:first-child{
	width: 700px;
	float: left;
	text-align: left;
	margin-left: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.delete-goods{
	width: 1200px;
	height: 70px;
	background-color: #fff;
}
.delete .delete-goods ul{
	height: 70px;
	font-size: 14px;
}
.delete .delete-goods ul li{
	line-height: 70px;
}
.delete .delete-goods ul li a{
	width: 86px;
	height: 28px;
	color: #A4A4A4;
	line-height: 28px;
	font-size: 12px;
	display: block;
	border: 1px solid #ddd;
	margin: 20px auto 0;
	border-radius: 2px;
}

/* 侧边栏 */
#cebian{
	width: 80px;
	height: auto;
	background-color: white;
	border-radius: 10px;
	padding: 4px 0 16px 0;
	position: fixed;
	right: 20px;
	bottom: 100px;
	z-index: 100;
	box-shadow: rgb(0 0 0 / 10%) 0 2px 6px;
}
.cebian-top,.cebian-but{
	width: 100%;
}
.cebian-top dl,.cebian-but dl{
	width: 100%;
	text-align: center;
	font-size: 12px;
	color: rgba(0,0,0,.4);
	margin-top: 20px;
	cursor: pointer;
}
.cebian-top dl dd a{
	color: rgba(0,0,0,.4);
}
.cebian-top dl dt,.cebian-but dl dt{
	margin-bottom: 5px;
}
.cebian-top dl dt span,.cebian-but dl dt span{
	font-size: 20px;
}
.cebian-but{
	display: none;
}
.cebian-top dl:hover{
	color: #CF0A2C;
}
.cebian-top dl:hover a{
	color: #CF0A2C;
}
.cebian-but dl:hover{
	color: #CF0A2C;
}

        </style>
	</head>
	<body>
		<div id="top"></div>
		<!-- 头部 -->
		<div id="daohang">
			<div id="nav">
				<div class="nav-img">
					<img src="../images/tm2.png" ><span>我的购物车</span>
				</div>
				<div class="nav-jindu"></div>
			</div>
		</div>
		
		<!-- 购物车 -->
		<div id="content">
			<div id="car-con">
				<div class="con-top">
					<ul>
						<li>商品</li>
						<li>单价</li>
						<li>数量</li>
						<li>小计</li>
						<li>操作</li>
					</ul>
				</div>
				<div class="con-list"></div>
				<div class="delete-list">
					<div class="dele-left">删除</div>
					<div class="jiesuan">
						<a href="#">立即结算</a>
					</div>
					<div class="goods-price">
						<p>
							总计：
							<span id="zongji"></span>
						</p>
						<p>
							已选择
							<span id="goods-zong">1</span>
							件商品,优惠
							<em>￥ 0.00</em>
						</p>
					</div>
				</div>
			</div>
			<div class="empty">
				<span></span>
				<p>您的购物车里什么也没有哦~</p>
				<a href="shopping.html">去逛逛</a>
			</div>
		</div>
		<!-- 热销推荐 -->
		<div class="tuijian">
			<p>热销推荐</p>
			<div class="tuijian-con">
				<div class="tuijian-list">
					<img src="img/shopcar/1.png" >
					<p>HUAWEI P40 Pro</p>
					<span>¥ 6488</span>
				</div>
				<div class="tuijian-list">
					<img src="img/shopcar/2.png" >
					<p>HUAWEI Mate 30E Pro</p>
					<span>¥ 6488</span>
				</div>
				<div class="tuijian-list">
					<img src="img/shopcar/3.png" >
					<p>HUAWEI FreeBuds Pro</p>
					<span>¥ 799</span>
				</div>
				<div class="tuijian-list">
					<img src="img/shopcar/4.png" >
					<p>HUAWEI MatePad 5G</p>
					<span>¥ 3149</span>
				</div>
				<div class="tuijian-list">
					<img src="img/shopcar/5.png" >
					<p>HUAWEI WATCH GT 2</p>
					<span>¥ 1488</span>
				</div>
			</div>
		</div>
		<div class="delete">
			<p>已删除商品</p>
			<ul>
				<li>商品</li>
				<li>数量</li>
				<li>金额</li>
				<li>操作</li>
			</ul>
			<div class="delete-goods">
				<ul>
					<li>HUAWEI Mate X2 5G 全网通 256GB（亮黑色）</li>
					<li>x1</li>
					<li>￥ 17999.00</li>
					<li>
						<a href="#">重新购买</a>
					</li>
				</ul>
			</div>
		</div>
		
		<!-- 侧边栏 -->
		<div id="cebian">
			<div class="cebian-top">
				<dl>
					<dt><span class="iconfont icon-cart_empty"></span></dt>
					<dd><a href="shopcar.html">购物车</a></dd>
				</dl>
				<dl>
					<dt><span class="iconfont icon-kefu"></span></dt>
					<dd>在线客服</dd>
				</dl>
				<dl>
					<dt><span class="iconfont icon-airudiantubiaohuizhi-zhuanqu_xianaixin"></span></dt>
					<dd>自助服务</dd>
				</dl>
			</div>
			<div class="cebian-but">
				<dl>
					<dt><span class="iconfont icon-top"></span></dt>
					<dd>返回顶部</dd>
				</dl>
			</div>
		</div>
		<!-- 底部 -->
		<div id="footer"></div>
	</body>
</html>
<script src="js/homejs/jQuery.js"></script>
<script type="text/javascript">
	$("#top").load("1top.html");
	$("#footer").load("foot.html")
</script>
<script src="js/shop/shopcar.js"></script>
<script type="text/javascript">
	// 侧边栏
	$(window).on('scroll',function(){
	    var st = $(document).scrollTop();
	    if( st>900 ){
	        $('.cebian-but').fadeIn(300);
	    }else{
	        $('.cebian-but').fadeOut(300);
	    }  
	});
	$(".cebian-but").click(function(){
	    if(scroll=="off"){
	        return;
	    }
	    $("html,body").animate({scrollTop: 0}, 600);
	});
</script>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>华为商城</title>
		<link rel="icon" type="images/x-icon" href="img/homeimg/favicon.ico">
		<link rel="stylesheet" type="text/css" href="css/shopcar.css"/>
	</head>
	<body>
		<div id="top"></div>
		<!-- 头部 -->
		<div id="daohang">
			<div id="nav">
				<div class="nav-img">
					<img src="img/shopcar/log.png" ><span>我的购物车</span>
				</div>
				<div class="nav-jindu"></div>
			</div>
		</div>
		
		<!-- 购物车 -->
		<div id="content">
			<div id="car-con">
				<div class="con-top">
					<ul>
						<li>商品</li>
						<li>单价</li>
						<li>数量</li>
						<li>小计</li>
						<li>操作</li>
					</ul>
				</div>
				<div class="con-list"></div>
				<div class="delete-list">
					<div class="dele-left">删除</div>
					<div class="jiesuan">
						<a href="#">立即结算</a>
					</div>
					<div class="goods-price">
						<p>
							总计：
							<span id="zongji"></span>
						</p>
						<p>
							已选择
							<span id="goods-zong">1</span>
							件商品,优惠
							<em>￥ 0.00</em>
						</p>
					</div>
				</div>
			</div>
			<div class="empty">
				<span></span>
				<p>您的购物车里什么也没有哦~</p>
				<a href="04fangdajing.html">去逛逛</a>
			</div>
		</div>
		<!-- 热销推荐 -->
		<div class="tuijian">
			<p>热销推荐</p>
			<div class="tuijian-con">
				<div class="tuijian-list">
					<img src="img/shopcar/1.png" >
					<p>HUAWEI P40 Pro</p>
					<span>¥ 6488</span>
				</div>
				<div class="tuijian-list">
					<img src="img/shopcar/2.png" >
					<p>HUAWEI Mate 30E Pro</p>
					<span>¥ 6488</span>
				</div>
				<div class="tuijian-list">
					<img src="img/shopcar/3.png" >
					<p>HUAWEI FreeBuds Pro</p>
					<span>¥ 799</span>
				</div>
				<div class="tuijian-list">
					<img src="img/shopcar/4.png" >
					<p>HUAWEI MatePad 5G</p>
					<span>¥ 3149</span>
				</div>
				<div class="tuijian-list">
					<img src="img/shopcar/5.png" >
					<p>HUAWEI WATCH GT 2</p>
					<span>¥ 1488</span>
				</div>
			</div>
		</div>
		<div class="delete">
			<p>已删除商品</p>
			<ul>
				<li>商品</li>
				<li>数量</li>
				<li>金额</li>
				<li>操作</li>
			</ul>
			<div class="delete-goods">
				<ul>
					<li>HUAWEI Mate X2 5G 全网通 256GB（亮黑色）</li>
					<li>x1</li>
					<li>￥ 17999.00</li>
					<li>
						<a href="#">重新购买</a>
					</li>
				</ul>
			</div>
		</div>
		
		<!-- 侧边栏 -->
		<div id="cebian">
			<div class="cebian-top">
				<dl>
					<dt><span class="iconfont icon-cart_empty"></span></dt>
					<dd><a href="shopcar.html">购物车</a></dd>
				</dl>
				<dl>
					<dt><span class="iconfont icon-kefu"></span></dt>
					<dd>在线客服</dd>
				</dl>
				<dl>
					<dt><span class="iconfont icon-airudiantubiaohuizhi-zhuanqu_xianaixin"></span></dt>
					<dd>自助服务</dd>
				</dl>
			</div>
			<div class="cebian-but">
				<dl>
					<dt><span class="iconfont icon-top"></span></dt>
					<dd>返回顶部</dd>
				</dl>
			</div>
		</div>
		<!-- 底部 -->
		<div id="footer"></div>
	</body>
</html>
<script src="js/homejs/jQuery.js"></script>
<script type="text/javascript">
	$("#top").load("1top.html");
	$("#footer").load("foot.html")
</script>
<script src="js/shop/shopcar.js"></script>
<script type="text/javascript">
	// 侧边栏
	$(window).on('scroll',function(){
	    var st = $(document).scrollTop();
	    if( st>900 ){
	        $('.cebian-but').fadeIn(300);
	    }else{
	        $('.cebian-but').fadeOut(300);
	    }  
	});
	$(".cebian-but").click(function(){
	    if(scroll=="off"){
	        return;
	    }
	    $("html,body").animate({scrollTop: 0}, 600);
	});
</script>